<!DOCTYPE html>
<html lang="en" style="height: 100%">
<head>
    <meta charset="UTF-8">
    <title>部门业绩统计</title>
</head>
<!DOCTYPE html>
<html lang="en" style="height: 100%">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<script src="https://cdn.bootcss.com/echarts/4.4.0-rc.1/echarts-en.common.js"></script>
<script src="../lib/jquery-3.4.1/jquery-3.4.1.min.js"></script>
<body style="height: 100%; margin: 0">

<div id="container" style="height: 100%"></div>
<script type="text/javascript">

    var dom = document.getElementById("container");
    var myChart = echarts.init(dom);
    var app = {};
    option = null;
    let getData = () => {
        let legendData = [];
        let seriesData = [];
        let selected = {};

        $.get({
            async: false,
            cache: false,
            url: "/api/department/partPie", success: (data) => {
                data.forEach(p => {
                    // 部门名称
                    let name = p.pname;
                    // orderCount 每个部门的订单数
                    let orderCount = p.orderCount;
                    legendData.push(name);
                    seriesData.push({
                        name: name,
                        value: orderCount
                    });
                    // 展示的部门
                    selected[name] = p.pid < 11
                });
            }
        });
        return {
            'legendData': legendData,
            'seriesData': seriesData,
            'selected': selected
        }
    };


    var data = getData();


    option = {
        title: {
            text: '部门业绩统计',
            x: 'center'
        },
        tooltip: {
            trigger: 'item',
            formatter: "{a} <br/>{b} : {c} ({d}%)"
        },
        legend: {
            type: 'scroll',
            orient: 'vertical',
            right: 10,
            top: 20,
            bottom: 20,
            data: data.legendData,

            selected: data.selected
        },
        series: [
            {
                name: '部门',
                type: 'pie',
                radius: '55%',
                center: ['40%', '50%'],
                data: data.seriesData,
                itemStyle: {
                    emphasis: {
                        shadowBlur: 10,
                        shadowOffsetX: 0,
                        shadowColor: 'rgba(0, 0, 0, 0.5)'
                    }
                }
            }
        ]
    };


    if (option && typeof option === "object") {
        myChart.setOption(option, true);
    }
</script>
</body>
</html>